<template>
  <PageWrapper title="房屋核查详情">
    <Description
      v-for="reg in registers"
      :key="reg.regId"
      @register="reg.reg"
      class="mt-4"
      :labelStyle="{ width: '30em' }"
    />

    <Description @register="register1" class="mt-4" :labelStyle="{ width: '30em' }" />
    <Description @register="register2" class="mt-4" :labelStyle="{ width: '30em' }" />
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, h, watch, unref, reactive, toRefs } from 'vue';
  import { Description, DescItem, useDescription } from '/@/components/Description/index';
  import { PageWrapper } from '/@/components/Page';
  import { useRoute } from 'vue-router';
  import { detailCityLastCheckApi, detailLastCheckApi } from '/@/api/demo/table';
  import { FullSrcPic } from '/@/components/FullSrcPic/index';
  import HouseMngMap from '/@/views/houseMng/HouseMap.vue';
  import { Col, Row } from 'ant-design-vue';
  import { getLastCheckDescSchema } from './tableData';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  const { info, success, warning, error } = createMessage;
  import { propTypes } from '/@/utils/propTypes';
  import type { DescRegister } from './typing';

  export default defineComponent({
    components: { Description, PageWrapper, HouseMngMap, Col, Row },
    props: {
      pid: propTypes.string,
      checkForms: propTypes.object,
      hid: propTypes.string,
    },
    setup(props) {
      const route = useRoute();

      const { checkForms } = toRefs(props);
      const hid = route.query?.hid ?? props.hid;

      const houseMngRef = ref();
      const registers = ref<DescRegister[]>([]);
      function buildSchemaList(_checkForms) {
        const registersValue: DescRegister[] = [];
        if (_checkForms && _checkForms.value && _checkForms.value.form) {
          _checkForms.value.form.forEach((element) => {
            const formDetailColumns: DescItem[] = [];
            const detailInfo = {};
            element.data.forEach((element2) => {
              detailInfo[element2.key] = element2.value;
              if (element2.isPhoto) {
                formDetailColumns.push({
                  label: element2.alias,
                  field: element2.key,
                  render: (curVal, data) => {
                    return h(FullSrcPic, {
                      boolVal: true,
                      picList: element2.photosValue,
                    });
                  },
                });
              } else {
                formDetailColumns.push({
                  label: element2.alias,
                  field: element2.key,
                });
              }
            });
            const [register] = useDescription({
              title: element.group,
              data: detailInfo,
              schema: formDetailColumns,
              column: 1,
              collapseOptions: { canExpand: true },
            });

            registersValue.push({
              regId: element.group,
              reg: register,
            });
          });
        }

        registers.value = registersValue;
      }

      buildSchemaList(checkForms);

      const detailLastCityCheckInfo = ref<Recordable>({});
      const detailLastCheckInfo = ref<Recordable>({});
      function fetchHouseInfo(_hid) {
        if (_hid) {
          detailCityLastCheckApi({ hid: _hid }).then((d) => {
            detailLastCityCheckInfo.value = d;
          });
          detailLastCheckApi({ hid: _hid }).then((d) => {
            detailLastCheckInfo.value = d;
          });
        }
      }

      fetchHouseInfo(hid);

      const [register1] = useDescription({
        title: '市级最后一次核查结果',
        data: detailLastCityCheckInfo,
        schema: getLastCheckDescSchema(),
        column: 1,
        collapseOptions: { canExpand: true },
      });

      const [register2] = useDescription({
        title: '区县最后一次核查结果',
        data: detailLastCheckInfo,
        schema: getLastCheckDescSchema(),
        column: 1,
        collapseOptions: { canExpand: true },
      });

      function locMap() {
        houseMngRef.value.locMap(hid);
      }

      // function updateHouseViewInfo() {
      //   buildSchemaList(props.checkForms);
      // }
      // function updateCheckViewInfo() {
      //   fetchHouseInfo(props.hid);
      // }
      // watch([() => props.hid], updateCheckViewInfo);
      // watch([() => props.checkForms], updateHouseViewInfo);

      return { registers, register1, register2, houseMngRef, locMap };
    },
  });
</script>
